<template>
  <el-form style="margin-left: 100px;margin-top: 30px" :model="RichTextData" :rules="rules" ref="RichForm">
    <el-form-item label="商品详情:" prop="TextData">
      <div style="width: 400px;border: 1px solid rgba(0,0,0,0.3)">
        <div id="toolbar-container" style="border-bottom: 1px solid rgba(0,0,0,0.3)"></div>
        <div id="editor-container" style="height: 500px;">
        </div>
      </div>
    </el-form-item>
    <el-button @click="Richsubmit(RichForm)" type="primary" style="margin-left: 80px;margin-top: 20px">提交</el-button>
  </el-form>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css'
import {createEditor, createToolbar} from '@wangeditor/editor'
import {computed, onMounted, reactive, ref, watch} from "vue";
import {useStore} from "vuex";
const store = useStore()
//富文本
// 编辑器配置
const editorConfig = {MENU_CONF: {}}
editorConfig.placeholder = '请输入内容'
editorConfig.onChange = (editor) => {
  RichTextData.TextData = editor.getHtml()
}
let RichForm = ref()
let editor
let RichTextData = reactive({
  TextData: ""
})
let rules = reactive({
  TextData: [{required: true, message: '请输入商品详情', trigger: 'blur'}]
})
// 工具栏配置
const toolbarConfig = {}
onMounted(() => {
  // 上传图片
  editorConfig.MENU_CONF['uploadImage'] = {
    server: 'http://api_devs.wanxikeji.cn/api/savePic',
    fieldName: 'img',
    maxNumberOfFiles: 10,
    customInsert(res, insertFn) {
      let imgUrl
      if (res.code === 2000) {
        imgUrl = "http://api_devs.wanxikeji.cn/" + res.data
      }
      insertFn(imgUrl)
    }
  }
  // 创建编辑器
  editor = createEditor({
    selector: '#editor-container',
    config: editorConfig,
    mode: 'simple ' // 或 'simple' 参考下文
  })
// 创建工具栏
  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default' // 或 'simple' 参考下文
  })
})
//提交
const emit = defineEmits(["DetailsSubmit"])
const Richsubmit = () => {
  store.commit('goods/get_goodsDetail', RichTextData.TextData)
  emit("DetailsSubmit")
}
let tem=computed(()=>{
  return store.state.edits.goods_detail
})
watch(tem,(val)=>{
  console.log()
  editor.setHtml(JSON.parse(val))
})
//给父亲
defineExpose({
  RichForm
})
</script>

<style scoped>

</style>
